<template>

    <div ref="scroll" id="scroll-page" style="overflow: hidden">
        <slot></slot>
        <!--loading动画，加载的数据的过程中显示 elementui load-->
        <div
                style="height: 40px;margin-top: 10px;z-index: 1"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(245,245,245)"></div>
    </div>

</template>

<script>
    export default {
        props: {
            //是否加载
            loading: Boolean,
            //有数据
            noData: Boolean,
            //偏移基础值
            offset: Number
        },
        name: "index",
        mounted() {
            //绑定事件监听，滚动的时候触发
            window.addEventListener('scroll', this.handleScroll, false);
        },
        beforeDestroy() {
            //移出事件监听
            window.removeEventListener('scroll', this.handleScroll)
        },
        data() {
            return {
                //滚动
                scrollAction: {
                    x: 'undefined',
                    y: 'undefined'
                }
            }
        },
        methods: {
            handleScroll(e) {
                var that = this
                //如果有数据，触发
                if (!that.noData) {
                    //垂直滚动的高度
                    let curHeight = document.documentElement.scrollTop || document.body.scrollTop
                    //获取div区域
                    var scrollPage = document.getElementById('scroll-page');
/*                    屏幕可见区域高（内容的可视高度，不包括边框，边距或滚动条）：document.body.clientHeight
                    正文内容高（整个元素的高度，包括带滚动条的隐蔽的地方）：document.body.scrollHeight
                    内容高+padding+边框：document.body.offsetHeight
                    滚动条已经滚动的高度：document.body.scrollTop
                    屏幕分辨率高：window.screen.height*/


/*                  innerHeight 返回窗口的文档显示区的高度 + 垂直滚动高度
                    innerWidth 返回窗口的文档显示区的宽度，如果有水平滚动条，也包括滚动条高度。*/
                    if ((curHeight + window.innerHeight >= that.$refs.scroll.offsetHeight +  that.offset) && that.isDownDirection()) {
                        //判断是否到达底部
                        if (!that.loading) {
                            //调用load加载数据
                            that.$emit('load')
                        }
                    }
                }
            },
            isDownDirection() {
                if (typeof this.scrollAction.x == 'undefined') {
                    this.scrollAction.x = window.pageXOffset;
                    this.scrollAction.y = window.pageYOffset;
                }
                var diffX = this.scrollAction.x - window.pageXOffset;
                var diffY = this.scrollAction.y - window.pageYOffset;

                this.scrollAction.x = window.pageXOffset;
                this.scrollAction.y = window.pageYOffset;

                if (diffX < 0) {
                    // Scroll right
                } else if (diffX > 0) {
                    // Scroll left
                } else if (diffY < 0) {
                    // Scroll down
                    return true
                } else if (diffY > 0) {
                    // Scroll up
                } else {
                    // First scroll event
                }
                return false
            }

        }
    }
</script>

<style scoped>

</style>
